<template>
  <view class="min-h-screen flex flex-col bg-gray-50">
    <!-- 协议正文（可滚动） -->
    <scroll-view class="flex-1 bg-white pb-2" scroll-y :scroll-with-animation="true">
      <!-- 服务说明 -->
      <view class="m-8">
        <text class="text-lg font-semibold text-gray-800 mb-2 block">一、服务说明</text>
        <text class="text-gray-600 leading-relaxed">
          本服务为您提供便捷的访客登记与预约管理功能，使用前请仔细阅读本协议。
        </text>
      </view>

      <!-- 用户义务 -->
      <view class="m-8" style="animation-delay: 0.1s;">
        <text class="text-lg font-semibold text-gray-800 mb-2 block">二、用户义务</text>
        <view class="space-y-3 ml-2">
          <view class="flex items-start">
            <text class="text-blue-500 mr-2">•</text>
            <text class="text-gray-600">提供真实有效的个人信息</text>
          </view>
          <view class="flex items-start">
            <text class="text-blue-500 mr-2">•</text>
            <text class="text-gray-600">不得虚假预约或恶意占用资源</text>
          </view>
          <view class="flex items-start">
            <text class="text-blue-500 mr-2">•</text>
            <text class="text-gray-600">不得传播违法违规内容</text>
          </view>
        </view>
      </view>

      <!-- 协议修改 -->
      <view class="m-8" style="animation-delay: 0.2s;">
        <text class="text-lg font-semibold text-gray-800 mb-2 block">三、协议修改</text>
        <text class="text-gray-600 leading-relaxed">
          我们保留修改本协议的权利，修改后将通过站内公告或短信通知您。
        </text>
      </view>
    </scroll-view>
    <!-- 协议勾选区域（吸底） -->
    <view class="bg-white p-4 pb-16 border-t border-gray-100 sticky bottom-0 z-10">
      <!-- 协议勾选项 -->
      <view class="mb-4 space-y-3">
        <view
            class="flex items-center p-2 rounded-lg transition-colors"
            :class="{'bg-blue-50': agreedService}"
            @click="agreedService = !agreedService"
        >
          <view class="flex items-center justify-center w-5 h-5 border rounded mr-3"
                :class="agreedService ? 'bg-blue-500 border-blue-500' : 'border-gray-300'">
            <text v-if="agreedService" class="text-white text-xs">✓</text>
          </view>
          <text class="text-gray-700">同意《用户服务协议》</text>
        </view>

        <view
            class="flex items-center p-2 rounded-lg transition-colors"
            :class="{'bg-blue-50': agreedPrivacy}"
            @click="agreedPrivacy = !agreedPrivacy"
        >
          <view class="flex items-center justify-center w-5 h-5 border rounded mr-3"
                :class="agreedPrivacy ? 'bg-blue-500 border-blue-500' : 'border-gray-300'">
            <text v-if="agreedPrivacy" class="text-white text-xs">✓</text>
          </view>
          <text class="text-gray-700">同意《隐私协议》</text>
          <text class="text-blue-500 ml-1" @click.stop="navigateToPrivacy">(查看详情)</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <button
          class="w-full bg-blue-500 text-white py-3 rounded-lg font-medium transition-all"
          :class="{'opacity-100': canSubmit, 'opacity-50': !canSubmit}"
          hover-class="bg-blue-600"
          :disabled="!canSubmit"
          @click="handleAgree"
      >
        同意并继续
      </button>
      <button
          class="w-full mt-3 text-gray-600 py-3 rounded-lg border border-gray-300 transition-colors"
          hover-class="bg-gray-50"
          @click="handleDisagree"
      >
        暂不同意
      </button>
    </view>
  </view>
</template>

<script setup>
import {computed, ref} from 'vue'

const agreedService = ref(false)
const agreedPrivacy = ref(false)
const canSubmit = computed(() => agreedService.value && agreedPrivacy.value)


const navigateToPrivacy = () => {
  uni.navigateTo({url: '/pages/privacy/index'})
}

const handleAgree = () => {
  if (!canSubmit.value) {
    uni.vibrateShort() // 震动反馈
    return
  }

  // 存储同意状态（带时间戳）
  uni.setStorageSync('agreement:v1.0', {
    service: true,
    privacy: true,
    agreedAt: new Date().toISOString()
  })
  uni.switchTab({url: '/pages/reservation/index'})
}

const handleDisagree = () => {
  uni.showToast({title: '需要同意协议才能使用全部功能', icon: 'none'});
}
</script>

<style scoped>
</style>